<template>
  <div class="yunshurenwu ">
    <!-- 查询框 -->
    <div class="chaxunk">
      <!-- 表单 -->
      <el-form ref="getform" label-width="120px" :inline="true" :model="getform">
        <el-form-item label="取件任务编号:" style="width: 33%; margin-left: -10px; " prop="id">
          <el-input v-model="getform.id" placeholder="请输入取件任务编号" style="width: 290px;  " clearable />
        </el-form-item>
        <el-form-item label="订单编号:" style="width: 33%; margin-left: -10px;" prop="orderId">
          <el-input v-model="getform.orderId" placeholder="请输入订单编号" style="width: 290px;" clearable />
        </el-form-item>
        <el-form-item label="所属营业部:" style="width: 33%; margin-left: -10px;" prop="agencyId">
          <treeselect v-model="getform.agencyId" style="width: 285px;" placeholder="请选择所属营业厅" :normalizer="normalizer" :options="options" />
        </el-form-item>
        <el-form-item label="预计完成时间:" style="width: 33%; margin-left: -10px;" prop="value1">
          <el-date-picker
            v-model="value1"
            style="width: 290px;"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00']"
          />
        </el-form-item>
        <el-form-item label="实际完成时间:" style="width: 33%; margin-left: -10px;" prop="value2">
          <el-date-picker
            v-model="value2"
            style="width: 290px;"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00']"
          />
        </el-form-item>
        <el-form-item label="任务分配状态:" style="width: 33%; margin-left: -10px;" prop="assignedStatus">
          <!-- <el-input placeholder="请选择任务分配状态" style="width: 290px;" clearable /> -->
          <el-select v-model="getform.assignedStatus" placeholder="请选择任务分配状态" style="width: 290px;" clearable>
            <el-option label="已分配" value="2" />
            <el-option label="待人工分配" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 90px;" @click="sousuo">搜索</el-button>
          <el-button style="width: 90px;" @click="chongzhi">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 任务总览 -->
    <div style="margin-top: 20px;  margin-bottom: 20px; width: 1350px; background-color: white; font-size: 14px;">

      <el-row>
        <el-button :class="{active:status==null}" style="color: black; width: 120px; height: 48px; border-color: white;" @click="status=null,getkuaidi()">全部</el-button>
        <el-button :class="{active:status==1}" style="color: black; width: 120px; height: 48px; border-color: white;" @click="status=1,getkuaidi()">新任务</el-button>
        <el-button :class="{active:status==2}" style="color: black; width: 120px; height: 48px; border-color: white;" @click="status=2,getkuaidi()">已完成</el-button>
        <el-button :class="{active:status==3}" style="color: black; width: 120px; height: 48px; border-color: white;" @click="status=3,getkuaidi()">已取消</el-button>

      </el-row>
    </div>
    <!-- 信息表格展示 -->
    <div style="width: 1350px;  background-color: white; padding: 28px;">
      <p style="margin: 0; padding-left: 0; margin-bottom: 20px;">
        <el-button :plain="true" type="primary" style="width: 90px; width: 98px;" @click="rengongfp">人工分配</el-button>
      </p>
      <template>
        <el-table
          v-loading="loading"
          :data="zongform"
          stripe
          style="width: 100%"
        >
          <!-- <el-table-column
            fixed="left"
            type="selection"
            disabled
          /> -->
          <el-table-column fixed="left" label="选择"><el-checkbox disabled /> </el-table-column>
          <el-table-column
            width="90px"
            type="index"
            label="序号"
            highlight-current-row="true"
          />
          <el-table-column
            prop="id"
            label="取件作业编号"
            width="170px"
          />
          <el-table-column
            prop="agencyName"
            label="所在营业部"
            width="185px"
          />
          <el-table-column
            prop="assignedStatus"
            label="任务分配状态"
            width="110px"
          >
            <template v-slot="{row}">
              <!-- <span >{{row.assignedStatus}}</span> -->
              <span v-if="row.assignedStatus===2" style="display: flex;"><span class="ydian">·</span> 已分配

              </span>
              <span v-if="row.assignedStatus===3"> <span class="ydian1">·</span>待人工分配</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="courierName"
            label="快递员姓名"
            width="120px"
          />
          <el-table-column
            prop="orderId"
            label="订单编号"
            width="180px"
          />
          <el-table-column
            prop="estimatedStartTime"
            label="预计开始时间"
            width="160px"
          />
          <el-table-column
            prop="estimatedEndTime"
            label="预计完成时间"
            width="170px"
          />
          <el-table-column
            prop="actualEndTime"
            label="实际完成时间"
            width="170px"
          />

        </el-table>
      </template>
      <div class="block" style="text-align: center;">

        <el-pagination
          :current-page="pageData.Page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { convertTime, transListToTreeData } from '@/utils'
import { getkuaidiApi, getDepartTree } from '@/api/base'
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  data() {
    return {
      getform: {
        id: null, // 订单id
        orderId: null, // 订单编号
        agencyId: null, // 营业厅机构
        minEstimatedEndTime: '', // 最小预计完成时间
        maxEstimatedEndTime: '', // 最大预计完成时间
        minActualEndTime: '', // 最小实际完成时间
        maxActualEndTime: '', // 最大实际完成时间
        assignedStatus: null // 任务分配状态
      },
      options: [], // 营业厅的总数据库
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
          // children: 'children',
          // label: `name`,
          // multiple: true,
          // checkStrictly: true
        }
      },
      value1: '', // 预计完成时间的值 数组
      value2: '', // 实际完成时间的值 数组
      status: null, // 任务状态标识
      total: null, // 总共多少条数据
      pageData: {
        page: 1, // 当前页
        pageSize: 5 // 每页多少条数据
      },
      zongform: [],
      loading: false// 页面加载缓存小图标
    }
  },
  created() {
    this.getkuaidi()
    this.getTransportFist()
  },

  methods: {
    // 取件派件分页数据
    async getkuaidi(status) {
      this.loading = true
      this.pageData.page = 1
      this.pageData.pageSize = 5
      status = this.status

      const res = await getkuaidiApi({
        ...this.pageData,
        status
      })

      console.log(res)
      this.total = +(res.counts)
      this.zongform = res.items

      this.loading = false
    },
    // 获取所有机构信息
    async getTransportFist() {
      const res = JSON.parse(await getDepartTree())
      this.options = transListToTreeData(res, `0`)
      // console.log(this.options)
    },
    // 煤业多少条数据
    handleSizeChange(val) {
      this.pageData.pageSize = val
      if (this.status === 4) {
        this.sousuo()
      } else {
        this.getkuaidi()
      }
    },
    // 第几页
    async handleCurrentChange(val) {
      if (this.status === 4) {
        this.pageData.page = val
        this.sousuo()
      } else {
        console.log(val)
        this.pageData.page = val
        this.getkuaidi()
      }
    },
    // 人工分配快递
    rengongfp() {
      this.$message.error(`请选择要分配的任务`)
    },
    // 重置表单
    chongzhi() {
      this.status = null
      this.value1 = ''
      this.value2 = ''
      this.getform.minEstimatedEndTime = ''
      this.getform.maxEstimatedEndTime = ''
      this.getform.minActualEndTime = ''
      this.getform.maxActualEndTime = ''
      this.$refs.getform.resetFields()
      this.pageData.page = 1
      this.pageData.pageSize = 5
      this.getkuaidi()
    },
    // 搜索模块
    async  sousuo() {
      this.pageData.page = 1
      this.pageData.pageSize = 5
      // console.log(this.value1)
      this.status = 4
      this.loading = true
      // if (!this.getform.signStatus) {
      //   this.getform.signStatus = null
      // }
      if (!this.getform.assignedStatus) {
        this.getform.assignedStatus = null
      }
      if (this.value1) {
        this.getform.minEstimatedEndTime = convertTime(this.value1[0])
        this.getform.maxEstimatedEndTime = convertTime(this.value1[1])
      } else {
        this.getform.minEstimatedEndTime = ''
        this.getform.maxEstimatedEndTime = ''
      }
      if (this.value2) {
        this.getform.minActualEndTime = convertTime(this.value2[0])
        this.getform.maxActualEndTime = convertTime(this.value2[1])
      } else {
        this.getform.minActualEndTime = ''
        this.getform.maxActualEndTime = ''
      }
      // if (this.value1) {
      //   this.getform.minEstimatedEndTime = convertTime(this.value1[0])
      //   this.getform.maxEstimatedEndTime = convertTime(this.value1[1])
      // }
      // if (this.value2) {
      //   this.getform.minActualEndTime = convertTime(this.value2[0])
      //   this.getform.maxActualEndTime = convertTime(this.value2[1])
      // }
      console.log({ ...this.getform, ...this.pageData })
      const res = await getkuaidiApi(
        { ...this.getform, ...this.pageData }
      )
      console.log(res)
      this.total = +(res.counts)
      this.zongform = res.items

      this.loading = false
    }
  }
}

</script>

<style lang="scss" scoped>
.yunshurenwu{
  // background-color: aqua;
  margin-top: 46px;
 padding: 23px 20px 20px 20px;
 .chaxunk{
  width: 1350px;
  height: 200px;
  background-color: white;
  padding: 20px 20px 20px 20px;
 }
 }
 .active{
  background-color: #ffeeeb;
    color: #e15536;}
    .ydian{

      color: #419eff;
       font-weight: 700;
       font-size: 45px;

    }
    .ydian1{

      color: #e50c8a;
       font-weight: 700;
       font-size: 45px;

    }
</style>
